{include 'header.tpl'}
<link href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css" rel="stylesheet">
<style>
    .fixednav { position: fixed; top: 0px; left: 0px; width: 100%; background-color: #fcfcfc; border-bottom: #7F7F7F; }
    .swiper-container { width: 100%; height: 100%; margin-left: auto; margin-right: auto; }

    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    .swiper-pagination-bullet-active{ background-color: #FF6600;}
    .swiper-slide img { height: auto; width: auto\9; width: 100%; }
</style>

<div class="contant">

    <div class="header">
        <div class="header_s">
            <span class="back"><a href="/"><i class="iconfont fan">&#xe679;</i></a></span>
            <span class="title">{$info.title}</span><span class="add_ads">&nbsp;</span>
            <div class="clear"></div>
        </div>
    </div>

    <div class="mail_prd_tp" style="margin-top: 56px;">
        {if count($info['img1']) eq 1}
            <img width="100%" height="100%" src="{$info['img1'][0]}"/>
        {else}
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    {foreach from=$info.img1 item=item name=foo}
                        <div class="swiper-slide">
                            <img width="100%" height="100%" data-src="{$item}" class="swiper-lazy"/>
                            <div class="swiper-lazy-preloader" style="margin-top:170px;"></div>
                        </div>
                    {/foreach}
                </div>
                <div class="swiper-pagination"></div>
            </div>
        {/if}
    </div>

    <!--基本信息-->
    <div class="info_basic">
        <div class="basic_title"><div class="basic_tlt">{$info.title}</div></div>
        <div class="price cf">
            <span class="price_jg_s">
                <em>￥{$info.price_new}</em>
                {if $info.price_old}<span class="price_yj">￥{$info.price_old}</span>{/if}
            </span>
            <span class="basic_fx" data-count="{$info.productList|count}" data-cover="{Service_Attach::getInstance()->getThumbUrl($info.img2, 80, 80)}"
                  data-cs_num="{$info.cs_num}" data-pid="{$info.pid}" data-title="{{$info.title}}"
                  data-product='{$info.productList|json_encode}'>
                <a href="javascript:;"><div class="add_gou2">购买</div></a>
            </span>
        </div>
        <div class="mall_recom cf">
            <span>推荐度</span>
            {for $foo=1 to $info.re_degree}
                <span class="price_xing"></span>
            {/for}
        </div>
    </div>

    <div class="basic_store">
        <ul>
            <li><a href="/" style="display: block"><span class="store_lf"><em><img src="/mall2/images/shop_icon.png"></em>一只小红薯</span><span class="store_rg">进入店铺<em><img src="/mall2/images/r_jt.png"></em></span></a></li>
            <li><a href="/store/list" style="display: block"><span class="store_lf"><em><img src="/mall2/images/aress.png"></em>线下门店</span><span class="store_rg"><em><img src="/mall2/images/r_jt.png"></em></span></a></li>
        </ul>
        <div class="custom-store cf">
            <span>企业认证</span>
            <span>担保交易</span>
            <span>线下门店</span>
        </div>
    </div>

    <div class="basic_xqs">
        <div class="xqs_tlt">商品详情</div>
        <div class="qstlt_sm">{$info.details}</div>
    </div>

    <div class="basic_xqxs"><img src="/mall2/images/as.jpg"></div>
    <div class="prd_title">更多精选商品</div>
    <div class="mall_prd">
        <ul class="cf">
            {foreach from=$recommendList item=item name=foo}
                <li>
                    <div class="mall_prd_item">
                        <div class="mall_prd_pic"><a class="mall_nav_fg" href="/index/goodDetail?id={$item.auto_id}"><img src="{Service_Attach::getInstance()->getThumbUrl($item.img2, 350, 350)}"/></a></div>
                        <div class="mall_prd_tlt"><a class="mall_nav_fg" href="/index/goodDetail?id={$item.auto_id}">{$item.title}</a></div>
                        <div class="mall_pro_yj">
                            <span class="pro_rs"><em>￥{$item.price_new}</em></span>
                            <span class="pro_yj">
                                <div class="add_gou" data-count="{$item.productList|count}"
                                     data-cover="{Service_Attach::getInstance()->getThumbUrl($item.img2, 80, 80)}"
                                     data-cs_num="{$item.cs_num}" data-pid="{$item.pid}" data-title="{{$item.title}}"
                                     data-product='{$item.productList|json_encode}'>购买</div></span>
                        </div>
                    </div>
                </li>
            {/foreach}
        </ul>
    </div>
    <div class="detail_menu cf">
        <ul>
            <li><a href="/">店铺主页</a></li>
            <li><a href="/user/index">我的订单</a></li>
            <li><a href="/store/list">线下门店</a></li>
        </ul>
    </div>

    {include 'bottom_cart.tpl'}

</div>

{include 'cart.tpl'}

<script src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.min.js"></script>
{*<script type="text/javascript" src="/js/swiper.min.js"></script>*}
<script type="text/javascript" language="JavaScript">
    $(function () {
        $(document).on('click', '.basic_fx', function () {
            var count = $(this).data('count');
            if (count > 1) {
                var cart = new Cart($(this), function (pid, num) {
                    addCart(pid, num);
                    $.toast('加入购物车成功！');
                });
                cart.create();
            } else {
                var pid = $(this).data('pid');
                addCart(pid, 1);
                $.toast('加入购物车成功！');
            }
        });

        var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            paginationClickable: true,
            lazyLoading: true,
            onInit: function (swiper) {
            },
            onSlideChangeStart: function () {
            }
        });
    })
</script>

{include 'footer.tpl'}
